<template>
  <div class="c-home-Top">
    <Topnav />
    <Topsearch />
    <div class="c-xxx"><Inswipe class="c-banner" /></div>
    
   
    <!-- 商品广告 -->
    <div class="c-ad">
      <img class="c-ad-img" src="../../assets/imgs/草原精肉.png" alt="" />
      <img class="c-ad-img" src="../../assets/imgs/新西兰柠檬.png" alt="" />
      <img class="c-ad-img" src="../../assets/imgs/草原精肉.png" alt="" />
      <img class="c-ad-img" src="../../assets/imgs/新鲜草莓.png" alt="" />
    </div>
    <!-- 礼拜五title -->
    <div class="c-firi">
      <div class="c-l">
        <img class="c-lImg" src="../../assets/imgs/c-秒表.png" alt="" />
        <span class="c-lT1">礼拜五</span>
        <span class="c-lT2">Firiday</span>
      </div>
      <div class="c-r">
        <span class="c-rT1">距离开始</span>
        <span class="c-rT2">5天</span>
        <span class="c-rT2">15</span>
        <span class="c-rT3">:</span>
        <span class="c-rT2">35</span>
        <span class="c-rT3">:</span>
        <span class="c-rT2">20</span>
        <span class="c-rT4">更多></span>
      </div>
    </div>
    <!-- 商品轮播图 -->
    <div class="c-shop-banner">
      <div class="c-shop-box" v-for="(item, index) in Shop" :key="index">
        <img class="c-shop-img" :src="item.src" alt="" />
      <div class="c-shop-t1">{{item.name}}</div>
      <div class="c-shop-t2">{{item.num}}</div>
      <div class="c-shop-t3">{{item.price}}</div>
      <div class="c-shop-t4">{{item.money}}</div>
      </div>
      
    </div>
    <!-- -->
    <!-- 新鲜水果title -->
    <div class="c-firi">
      <div class="c-l">
        <img class="c-lImg2" src="../../assets/imgs/c-水果.png" alt="" />
        <span class="c-lT1">新鲜水果</span>
        <span class="c-lT2">采自新疆优质水果生产基地，品质一流</span>
      </div>
      <div class="c-r">
        <span class="c-rT4">更多></span>
      </div>
    </div>
    <!-- 新鲜水果 -->
    <div class="c-fruits-box" >
      <div class="c-fruits" v-for="(item,index) in Fruits" :key="index">
        <img class="c-fru-img1" :src="item.masterPic" alt="">
      <div class="c-fru-t1">{{item.commodityName}}</div>
      <div class="c-fru-t2">果肉绵密、花蜜般的甘甜百吃不厌</div>
      <div class="c-fru-t3">¥ {{item.price}}</div>
      <s class="c-fru-t4">¥ {{item.saleNum}}</s>
      <img class="c-fru-img2" src="../../assets/imgs/goche1.png" alt="">
      </div>
    </div>

<!-- 水产海鲜title -->
    <div class="c-firi">
      <div class="c-l">
        <img class="c-lImg2" src="../../assets/imgs/c-海鲜.png" alt="" />
        <span class="c-lT1">水产海鲜</span>
        <span class="c-lT2">国内外新鲜到港的鱼虾蟹贝，我们全都有</span>
      </div>
      <div class="c-r">
        <span class="c-rT4">更多></span>
      </div>
    </div>
  <!-- 海鲜 -->
<div class="c-fruits-box" >
      <div class="c-fruits" v-for="(item,index) in Fruits" :key="index">
        <img class="c-fru-img1" :src="item.masterPic" alt="">
      <div class="c-fru-t1">{{item.commodityName}}</div>
      <div class="c-fru-t2">果肉绵密、花蜜般的甘甜百吃不厌</div>
      <div class="c-fru-t3">¥ {{item.price}}</div>
      <s class="c-fru-t4">¥ {{item.saleNum}}</s>
      <img class="c-fru-img2" src="../../assets/imgs/goche1.png" alt="">
      </div>
    </div>
<!-- 肉类禽蛋title -->

    <div class="c-firi">
      <div class="c-l">
        <img class="c-lImg2" src="../../assets/imgs/c-肉.png" alt="" />
        <span class="c-lT1">肉类禽蛋</span>
        <span class="c-lT2">国内外新鲜到港的鱼虾蟹贝，我们全都有</span>
      </div>
      <div class="c-r">
        <span class="c-rT4">更多></span>
      </div>
    </div>
  <!-- 肉类禽蛋 -->
<div class="c-fruits-box" >
      <div class="c-fruits" v-for="(item,index) in Fruits" :key="index">
        <img class="c-fru-img1" :src="item.masterPic" alt="">
      <div class="c-fru-t1">{{item.commodityName}}</div>
      <div class="c-fru-t2">果肉绵密、花蜜般的甘甜百吃不厌</div>
      <div class="c-fru-t3">¥ {{item.price}}</div>
      <s class="c-fru-t4">¥ {{item.saleNum}}</s>
      <img class="c-fru-img2" src="../../assets/imgs/goche1.png" alt="">
      </div>
    </div>
    <!-- 蛋奶速食title -->

    <div class="c-firi">
      <div class="c-l">
        <img class="c-lImg2" src="../../assets/imgs/c-奶.png" alt="" />
        <span class="c-lT1">蛋奶速食</span>
        <span class="c-lT2">国内外新鲜到港的鱼虾蟹贝，我们全都有</span>
      </div>
      <div class="c-r">
        <span class="c-rT4">更多></span>
      </div>
    </div>
  <!-- 蛋奶速食 -->
<div class="c-fruits-box" >
      <div class="c-fruits" v-for="(item,index) in Fruits" :key="index">
        <img class="c-fru-img1" :src="item.masterPic" alt="">
      <div class="c-fru-t1">{{item.commodityName}}</div>
      <div class="c-fru-t2">果肉绵密、花蜜般的甘甜百吃不厌</div>
      <div class="c-fru-t3">¥ {{item.price}}</div>
      <s class="c-fru-t4">¥ {{item.saleNum}}</s>
      <img class="c-fru-img2" src="../../assets/imgs/goche1.png" alt="">
      </div>
    </div>
    <Foot />
  </div>
</template>

<script>
import Topnav from "../Topnav";
import Topsearch from "../Topsearch";
import Inswipe from "../Inswipe";
import Foot from "../Foot";
import axios from 'axios';

export default {
  name: "Home",
  components: {
    Topnav,
    Topsearch,
    Inswipe,
    Foot,
  },
  Fruit:Array,
  mounted(){
    axios.get('/api/small/commodity/v1/commodityList').then(res=>{
      this.Fruits = res.data.result.pzsh.commodityList;
      console.log(res.data.result.pzsh);
    });
  },
  data() {
    return {
      Shop: [
        {
          name: "新西兰佳沛黄金奇异果",
          num: "6只装",
          price: "礼拜五价 : ",
          money: "¥ 28.80",
          src: require("../../assets/imgs/猕猴桃.png"),
        },
        {
          name: "新西兰佳沛黄金奇异果",
          num: "6只装",
          price: "礼拜五价 : ",
          money: "¥ 28.80",
          src: require("../../assets/imgs/肉.png"),
        },
        {
          name: "新西兰佳沛黄金奇异果",
          num: "6只装",
          price: "礼拜五价 : ",
          money: "¥ 28.80",
          src: require("../../assets/imgs/草莓.png"),
        },
        {
          name: "新西兰佳沛黄金奇异果",
          num: "6只装",
          price: "礼拜五价 : ",
          money: "¥ 28.80",
          src: require("../../assets/imgs/虾.png"),
        },
      ],
      // 水果
      Fruits:[
        // {
        //   name: "新西兰佳沛黄金奇异果",
        //   introduce: "果肉绵密、花蜜般的甘甜百吃不厌",
        //   new: "¥ 28.80",
        //   used: "¥40.00",
        //   img:require("../../assets/imgs/油桃.png"),
        //   src: require("../../assets/imgs/goche1.png"),
        // },
        // {
        //   name: "新西兰佳沛黄金奇异果",
        //   introduce: "果肉绵密、花蜜般的甘甜百吃不厌",
        //   new: "¥ 28.80",
        //   used: "¥40.00",
        //   img:require("../../assets/imgs/蓝莓.png"),
        //   src: require("../../assets/imgs/goche1.png"),
        // },{
        //   name: "新西兰佳沛黄金奇异果",
        //   introduce: "果肉绵密、花蜜般的甘甜百吃不厌",
        //   new: "¥ 28.80",
        //   used: "¥40.00",
        //   img:require("../../assets/imgs/杏.png"),
        //   src: require("../../assets/imgs/goche1.png"),
        // },{
        //   name: "新西兰佳沛黄金奇异果",
        //   introduce: "果肉绵密、花蜜般的甘甜百吃不厌",
        //   new: "¥ 28.80",
        //   used: "¥40.00",
        //   img:require("../../assets/imgs/树莓.png"),
        //   src: require("../../assets/imgs/goche1.png"),
        // },
        ],
           
    };
 
  },
  
};
</script>

<style scoped>
.c-home-top{
  width: 1920px;
}
.c-home-box {
  width: 1280px;
}
/* banner */
.c-xxx{
  overflow:hidden;
}
.c-banner {
  width: 1920px;
  height: 500px;
  margin-left: -960px;
  position: relative;
  top: 0;
  left: 50%;
}
/* 广告 */
.c-ad {
  margin: 20px auto;
  width: 1280px;
  height: 140px;
  display: flex;
  justify-content: space-between;
}
.c-ad-img {
  width: 305px;
  height: 140px;
}
/* 礼拜五 */
.c-firi {
  width: 1280px;
  height: 100px;
  background-color: #ebffe8;
  margin: 0 auto;
  margin-bottom: 20px;
  border-bottom: 1px #498e3d solid;
  display: flex;
  justify-content: space-between;
}
.c-l,
.c-r {
  display: inline-block;
}
.c-lImg {
  width: 36px;
  height: 40px;
  vertical-align: middle;
  padding-bottom: 15px;
  padding-right: 18px;
  padding-left: 30px;
}
.c-lT1 {
  font-size: 30px;
  line-height: 100px;
  color: #498e3d;
  padding-right: 20px;
}
.c-lT2 {
  font-size: 24px;
  line-height: 100px;
  color: #afb4ae;
}
.c-rT1 {
  font-size: 24px;
  line-height: 100px;
  color: #498e3d;
  padding-right: 10px;
}
.c-rT2 {
  font-size: 20px;
  padding: 12px 15px;
  line-height: 100px;
  border-radius: 15%;
  background-color: #f08200;
  color: #fff;
  margin-left: 10px;
  margin-right: 10px;
}
.c-rT3 {
  font-size: 20px;
  line-height: 100px;
  color: #f08200;
}
.c-rT4 {
  font-size: 18px;
  line-height: 100px;
  color: #6f706f;
  padding-right: 30px;
  padding-left: 20px;
}
/* 商品轮播 */
.c-shop-banner {
  width: 1280px;
  height: 543px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  /* border: 1px #f00 solid; */
}
.c-shop-box {
  display: inline-block;
  width: 305px;
  height: 433px;
  background-color: #f8f6f7;
}
.c-shop-t1{
font-size: 18px;
color: #333;
line-height: 35px;
}
.c-shop-t2{
  font-size:16px;
  color: #666;
  line-height: 25px;
}
.c-shop-t3{
  display: inline;
  font-size: 18px;
  color: #f08200;
   line-height: 45px;
}
.c-shop-t4{
  display: inline;
  font-size: 24px;
  color: #ff5757;
   line-height: 45px;
}

.c-shop-img {
  width: 305px;
  height: 305px;
}
/* 水果 */
.c-lImg2 {
  width: 44px;
  height: 40px;
  vertical-align: middle;
  padding-bottom: 15px;
  padding-right: 18px;
  padding-left: 30px;
}
/* 海鲜 */
.c-fruits-box{
  margin: 0 auto;
  width: 1280px;
  display: flex;
  justify-content: space-between;
   margin-bottom:20px ;
}
.c-fruits{
  display: inline-block;
  width: 305px;
  height: 433px;
  border: 1px #ececec solid;
  overflow: hidden;
 
}
.c-fru-img1{
  width: 305px;
  height: 305px;
 /* border: 1px #f00 solid; */
}
.c-fru-t1{
  font-size:18px ;
  color: #333;
  line-height: 35px;
  text-align:left;
  padding-left:20px ;
}
.c-fru-t2{
  font-size:14px ;
  color: #666;
  line-height: 35px;
  text-align:left;
  padding-left:20px ;
}
.c-fru-t3{
  display: inline;
  font-size:24px ;
  color: #ff5757;
  line-height: 35px;
  float:left;
  padding-left:20px ;
}
.c-fru-t4{
  display: inline;
  font-size:18px;
  color: #666;
  float:left;
  line-height: 40px;
  padding-left:15px ;
}
.c-fru-img2{
  width: 34px;
  height: 30px;
  vertical-align: middle;
  float:right;
  margin-right:20px ;
}
/* 水产海鲜title */
</style>
